<template>
    哈哈哈我已经初始完成
    <div>生命周期钩子函数中渲染阶段</div>
    <p id="myp">{{ msg }}</p>
    <ul id="myul">
        <li v-for="item in arr">
            {{ item }}
        </li>
    </ul>
    <button @click="arr.push(5)">点击添加一个数字</button>

</template>
<script>
export default {
    data() {
        return {
            msg: 'hello vue',
            arr:[1,2,3,4],
            time:null
            }
    },
    beforeCreate() {
        console.log("beforeCreate 创建被执行了。。。。");
        console.log(this.msg); 
    },
    created() {
        //data 和methods 初始化完成
        console.log("created 创建完成并执行。。。。")
        console.log(this.msg);
        this.time = setInterval(() => { 
            console.log("定时器执行了。。。。");
        },1000)
    },
    beforeMount() {
        console.log("beforeMount 在挂载前执行。。。。");
      console.log(document.getElementById("myp"));   //如果真实挂载会拿到数据 如果是虚拟 undefined null
        //this.msg = '哈哈哈 我被重新赋值了。。'
    },
    mounted() {
        console.log("Mounted 在挂载后执行。。。。");
        console.log(document.getElementById("myp"));
        //this.msg = "我又被修改了"
    },
    beforeUpdate() {
        console.log("beforeUpdate 更新前执行。。。。");
         console.log(document.querySelectorAll("#myul li")[4]);
    },
    updated() {
         console.log("beforeUpdate 更新前执行。。。。");
        console.log(document.querySelectorAll("#myul li")[4]);
    },
    beforeUnmount() {
        console.log("beforeUnmount 销毁前执行。。。。");
        clearInterval(this.time)
    },
    unmounted() {
        console.log("Unmounted 销毁后执行。。。。");
    }



    }
</script>
<style scoped>

</style>